<template>
  <div class="color-picker">
    <div class="title">
      R
    </div>
    <input
        type="range"
        id="red-slider"
        min="0"
        max="255"
        v-model="red"
        @input="updateColor"
    />
    <div>
      <el-input-number
          v-model="red"
          :min="0"
          :max="255"
          controls-position="right"
          size="small"
          class="du-el-input-number"
      >
      </el-input-number>
    </div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue';
const emit = defineEmits(['updateRed']);

// 定义 red 变量来绑定滑块的值，范围是 0 到 255
const red = ref(255); // 初始为纯红色 (255, 0, 0)

// 定义计算属性 rgbColor，根据 red 值生成 RGB 颜色
const rgbColor = ref(`rgb(${red.value}, 0, 0)`);

// 监听 red 的变化并更新颜色值
const updateColor = () => {
  rgbColor.value = `rgb(${red.value}, 0, 0)`;
  emit('updateRed', red.value);
};

// 监听 red 的变化，确保初始值也能正确显示
watch(red, updateColor);


</script>

<style scoped>
.color-picker {
  display:flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  .title{
    font-weight: bold;
    font-weight: bolder;
    color: #666666;
  }


  :deep(.el-input-number.is-controls-right[class*=small] [class*=decrease], .el-input-number.is-controls-right[class*=small] [class*=increase]) {
    --el-input-number-controls-height: 15px;
  }

  :deep(.el-input-number--small) {
    width: 71px;
    height: 30px;
  }

  :deep(.el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 0px;
  }
}

input[type="range"] {
  width: 164px;
  height: 15px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
      to left,
      rgb(255, 255, 525),
      rgb(200, 255, 255),
      rgb(150, 255, 255),
      rgb(100, 255, 255),
      rgb(50, 255, 255),
      rgb(0, 255, 255)
  );
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 18px;
  background-color: #FF7A00;

  border: 2px solid #aaa;
}




.color-display {
  margin-top: 20px;
  font-size: 18px;
}

.selected-color {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  border-radius: 50%;
  display: inline-block;
}
</style>
